<template>
    <div>
        <el-breadcrumb separator="/" style="margin-bottom: 20px;">
            <el-breadcrumb-item>
                <i class="el-icon-date"></i> 管理员申请列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row style="margin-bottom: 20px;display: flex;justify-content: start">
            <el-col style="width:200px">
                <el-input v-model="inputText" placeholder="查询的姓名" clearable ></el-input>
            </el-col>
        </el-row>
        <el-table :data="this.search()" :cell-style="cellStyle" border :row-class-name="tableRowClassName" style="width: 100%" >
            <el-table-column prop="name" label="申请者姓名" align="center" width="150"></el-table-column>
            <el-table-column prop="account" label="申请者电话" align="center" width="150"></el-table-column>
            <el-table-column prop="userType" label="申请类型" align="center" width="150"></el-table-column>
            <el-table-column prop="userStatus" label="申请状态" align="center" width="150"></el-table-column>
            <el-table-column prop="handle" label="操作" width="200" align="center">
                <template slot-scope="scope"> 
                    <el-button @click="cancel(scope.row)" round size="small">
                        驳回
                    </el-button>
                    <el-button @click="agree(scope.row)"  round size="small">
                        同意
                    </el-button> 
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import axios from "axios"
import { createNamespacedHelpers } from 'vuex';
const { mapActions, mapState } = createNamespacedHelpers('applyList'); // 对应的仓库 js 文件
export default {
    data(){
        return {
            inputText:''
        }
    },
    mounted(){
        this.getAdminList()
    },
    computed:{
        ...mapState(['userApplyList'])
    },
    methods:{
        ...mapActions(['getAdminList']),
        // 通过回调函数来设置字体颜色
        cellStyle(row,column,rowIndex,columnIndex){
            // console.log(row,row.column)
            if(row.column.label === '申请状态' && row.row.userStatus === "可用"){
                return 'color:dodgerblue'
            }else if(row.column.label === '申请状态' && row.row.userStatus === "不可用"){
                return 'color:red'
            }
        },
        // 状态为申请中的背景颜色
        tableRowClassName({row, rowIndex}) {
            console.log(row, rowIndex)
            if (row.userStatus === "申请中") {
                return 'warning-row';
            }
            return '';
        },
        // 搜索
        search(){ 
            const text = this.inputText; 
            return this.userApplyList.filter(item => item.name.includes(text)) 
        },
        agree(value){
            this.$confirm('是否同意该申请?', '申请提示:', {
                cancelButtonText:'取消',
                confirmButtonText: '确定',
                type:'warning'
            }).then(()=>{
                this.$message({
                    type: 'success',
                    message: '申请通过!'
                });
                axios
                .post('/admins/updateUserStatus', {_id:value._id, userStatus:1})
                .then(res => {
                    // console.log(res);
                    if(res.data){
                        this.getAdminList()
                    }
                })
                this.getAdminList()
            }).catch(()=>{
                this.$message({
                    type: 'info',
                    message: '申请取消!'
                })
            })
        },
        cancel(value){
             this.$confirm('是否驳回该申请?', '申请提示:', {
                confirmButtonText: '确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                this.$message({
                    type: 'success',
                    message: '该申请成功驳回!'
                })
                axios
                .post('/admins/updateUserStatus', {_id:value._id, userStatus:2})
                .then(res => {
                    // console.log(res);
                    if(res.data){
                        this.getAdminList()
                    }
                })
            }).catch(()=>{
                this.$message({
                    type: 'info',
                    message: '取消驳回!'
                })
            })
        }
    }
}
</script>

<style>
.el-table .warning-row {
    background: rgb(252, 240, 219);;
}

</style>